<template>
    <el-dialog v-model="drawer" title="取消订单" :append-to-body="true" width="600px" @close="close">
      <el-form ref="ruleRefForm" size="small" :model="form" :rules="rules">
        <!-- <el-form-item label="客户的原因">
            <el-radio-group v-model="form.customerReason">
                <el-radio v-for="item in customerReason" :key="item.value" :label="item.value" size="small">{{item.label}}</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="我方的原因">
            <el-radio-group v-model="form.reason">
                <el-radio v-for="item in reasonList" :key="item.value" :label="item.value" size="small">{{item.label}}</el-radio>
            </el-radio-group>
            <el-row style="margin-top:10px;" v-if="form.reason == -1">
                <el-input v-model="form.reasonDetail" placeholder="其他, 请输入" size="small"></el-input>
            </el-row>
        </el-form-item> -->
        <el-form-item label="退款原因">
            <el-input v-model="form.reasonDetail" placeholder="请输入" size="small"></el-input>
        </el-form-item>
        <el-form-item label="是否退款">
            <el-radio-group v-model="form.cancelType">
                <el-radio v-for="item in cancelTypeList" :key="item.value" :label="item.value" size="small">{{item.label}}</el-radio>
            </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-row justify="center">
            <el-button size="small" type="primary" @click="submitForm(ruleRefForm)">提交</el-button>
            <el-button size="small" type="default" @click="cancelForm(ruleRefForm)">取消</el-button>
        </el-row>
      </template>
    </el-dialog>
</template>

<script>
import { computed, toRefs, ref, reactive } from 'vue'
import { useOrderApi } from '/@/api/order'
import { ElMessage } from 'element-plus'
export default {
    name: 'CancelDetail',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        defaultForm: {
            type: Object,
            default(){
                return {}
            }
        }
    },
    emits: ['onSubmit', 'update:dialogDrawer'],
    setup(props, context) {
        const { dialogDrawer, defaultForm } = toRefs(props)
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        const ruleRefForm = ref()
        const orderApi = useOrderApi()
        const state = reactive({
            form: {
                customerReason: 1,
                reason: 1,
                reasonDetail: '',
                cancelType: 1
            },
            rules: {},
            customerReason: [{
                label: '不想要',
                value: 1
            },{
                label: '重复购买',
                value: 2
            },{
                label: '下错单了',
                value: 3
            },{
                label: '其他',
                value: 4
            }],
            reasonList: [{
                label: '下错单了',
                value: 1
            },{
                label: '填错订单信息',
                value: 2
            },{
                label: '仓库没货了',
                value: 3
            },{
                label: '自定义',
                value: -1
            }],
            cancelTypeList: [{
                label: '退款',
                value: 1
            },{
                label: '不退款',
                value: 0
            }]
        })
        const close = () => {
            context.emit('update:dialogDrawer', false)
        }
        // 保存
        const submitForm = formEl => {
            if (!formEl) return
            formEl.validate((valid) => {
                if (valid) {
                    const { id } = defaultForm.value // 订单id
                    orderApi.cancelOrder({
                        orderId: id,
                        operateId: '',
                        note: state.form.reasonDetail,
                        isReturn: state.form.cancelType
                    }).then(() => {
                        ElMessage.success('取消成功')
                        context.emit('onSubmit', true) // 提交
                        context.emit('update:dialogDrawer', false)
                    })
                }
            })
        }
        // 取消
        const cancelForm = formEl => {
            if (!formEl) return
            formEl.resetFields()
            context.emit('update:dialogDrawer', false)
        }
        return {
            ...toRefs(state),
            drawer,
            close,
            ruleRefForm,
            submitForm,
            cancelForm
        }
    }
}
</script>

<style>

</style>